<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地址识别</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
</head>
<body>
    <div id="container" v-cloak>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入地址，例如：   王青海 18344556677 浙江省 嘉兴市 南湖区 南湖街道花园路518号温州大厦D幢绍兴门11111号"
        v-model="addrStr">
      </el-input>
      <el-card class="box-card" v-if="Object.keys(resObj).length>0">
        <div v-for="(v,k) in resObj" :key="k">
          <el-row :gutter="1" v-if="v">
            <el-col :span="8">
              <el-card shadow="hover">
                {{ k }}
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="never">
                {{v}}
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>
        <script type="module">
          //  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js' // esm版
           import formatAddrData from './address.js'
           import addressData from './addressData.js'
           new Vue({
             el: '#container',
             data:{
                addrStr: '',
                resObj: {},
             },
             mounted(){
               console.log('mounted');
               formatAddrData.initData(addressData);
             },
             watch:{
              addrStr(val){
                const res = formatAddrData.autoReadAddress(val);
                console.info(res)
                this.resObj = {...res}
              }
             }
           })
           console.log('after mounted');
        </script>
</body>
</html>